<template>
  <div class="baidu-map">
    <baidu-map class="baidu-map-content" ak="9jGHjmxMnsh7xACwRsVV1xoufP8SdLcw" center="贵阳市花溪区" :scroll-wheel-zoom="true" :zoom="15">
        <div class="baidu-map-content-header">
          <Select v-model="location" size="large" style="width:100px" class="margin-left-10">
              <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
          <Input v-model.lazy="keyword" size="large" placeholder="输入地名搜索(仅限贵阳市)" style="width:300px;" class="margin-left-10"></Input>
        </div>
        <bm-view class="baidu-map-content-view"></bm-view>
        <!-- 缩放比例 -->
        <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
        <!-- 地图类型 -->
        <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
        <!-- 缩略图 -->
        <bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :isOpen="true"></bm-overview-map>
        <!-- 定位 -->
        <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
        <!-- 版权 -->
        <bm-copyright
          anchor="BMAP_ANCHOR_TOP_RIGHT"
          :copyright="[{id: 1, content: 'Copyright By 海誉科技'}]">
        </bm-copyright>
        <!-- 城市列表 -->
        <!-- <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list> -->


        <bm-local-search :forceLocal="true" :keyword="keyword" :auto-viewport="true" location="贵阳市"></bm-local-search>
      </baidu-map>
  </div>
</template>

<script>
import {BaiduMap, BmNavigation, BmMapType, BmOverviewMap, BmGeolocation, BmCopyright, BmCityList,
BmControl, BmAutoComplete, BmView, BmLocalSearch} from 'vue-baidu-map'
export default {
  data () {
    return {
      keyword:[],
      location:'贵阳市',
      cityList: [
          {
              value: '贵阳市',
              label: '贵阳市'
          }
      ],
    }
  },
  components: {
    BaiduMap,
    BmNavigation,
    BmMapType,
    BmOverviewMap,
    BmGeolocation,
    BmCopyright,
    BmCityList,
    BmControl,
    BmAutoComplete,
    BmView,
    BmLocalSearch
  },
  methods: {
    onChange (e) {
      console.log(e.target.value)
    }
  }
}
</script>

<style lang="less">
.baidu-map {
  width: 100%;
  height: 100%;
  &-content {
    height:100%;
    width:100%;
    position: relative;
    &-header {
      height: 50px;
      line-height: 50px;
      background: #fff;
      border-bottom: 1px solid #efefef;
    }
    &-view {
      position: absolute;
      top:50px;
      bottom:0px;
      left: 0px;
      right:0px;
    }
  }
}
</style>
